<template>
	<view class="content">
		<view class="tabs">
			<view :class="item.code === tabsCho ? 'tab tab-cho' : 'tab'" v-for="item in tabsList" :key="item.code"
				@click="tabsCho = item.code">
				{{ item.label }}
			</view>
		</view>
		<AllImg v-show="tabsCho === 'img'" />
		<TypeAllImg v-show="tabsCho === 'type'" />
		<History v-show="tabsCho === 'his'" />
	</view>
</template>

<script>
import AllImg from '../../component/AllImg/index'
import TypeAllImg from '../../component/TypeAllImg/index'
import History from '../../component/History/index'
export default {
	components: {
		AllImg,
		TypeAllImg,
		History
	},
	data() {
		return {
			tabsCho: 'type',
			tabsList: [
				{
					code: 'img',
					label: '所有图片列表'
				},
				{
					code: 'type',
					label: '作品分类'
				},
				{
					code: 'his',
					label: '往日作品创建'
				},
				// {
				// 	code: 'custom',
				// 	label: '自己上传作品'
				// },
			]
		}
	},
	onLoad() {

	},
	methods: {

	}
}
</script>

<style lang="less" scoped>
.tabs {
	display: flex;
	flex-wrap: nowrap;

	>.tab {
		min-width: 80px;
		height: 40px;
		line-height: 40px;
		background-color: #fff;
		border: 1px solid #000;
		padding: 0 10px;
		margin-right: 10px;
		text-align: center;
		cursor: pointer;
	}

	>.tab-cho {
		background-color: rgb(102, 255, 0);
	}
}

.tabImg {
	// width: ;
}
</style>


